<script lang="ts" setup>
import { administratorChildren } from "@/routes";
import { RouteRecordName } from "vue-router";
import navList from "../nav-list/index.vue";

const main = useMainStore();
let activeRouteName = $ref<RouteRecordName>("");
let routes = computed(() => {
  const activeTopLevelRoute = administratorChildren.find((item) => item.name == activeRouteName);
  if (activeTopLevelRoute) return activeTopLevelRoute.children || [activeTopLevelRoute];
  else return administratorChildren;
});
</script>

<template>
  <vpopup-click
    direction="right"
    popuper-class="nav-popup-list"
    transition-name="fade"
    :gap="0"
    :fixed="main.fixed"
    class="nav-popup-list-trigger"
  >
    <template #popup>
      <div h="48px" text="white" flex="~ none" items="center" p="r-12px">
        <span text="18px" m="r-auto">Vben Admin</span>
        <i-material-symbols:push-pin v-if="main.fixed" @click="main.fixed = !main.fixed" />
        <i-material-symbols:push-pin-outline v-else @click="main.fixed = !main.fixed" />
      </div>
      <div class="nav-list-container">
        <nav-list :routes="routes" :level="1" />
      </div>
    </template>
    <div
      v-for="item in administratorChildren"
      :class="['menu-nav-item', 'nav-popup-list', isRouteActive(item) && 'active']"
      @click="activeRouteName = item.name!"
    >
      <component :is="item?.meta?.icon" class="icon" />
      <div class="text">{{ item?.meta?.title }}</div>
    </div>
  </vpopup-click>
</template>
<style lang="less">
.nav-list-container {
  overflow: hidden;
  overflow-y: auto;
  border: 1px solid rgb(255 255 255 / 10%);
  border-right: 0;
  border-bottom: 0;
  height: 100%;
}

.vpopup-popuper.nav-popup-list {
  height: 100vh;
  width: 200px;
  display: flex;
  flex-direction: column;
}

.menu-nav-item.nav-popup-list {
  flex-direction: column;
  justify-content: center;
  border: 3px solid transparent;
  border-top: 0;
  border-bottom: 0;

  &.active {
    border-left-color: var(--el-color-primary);
    background: var(--menu-bg-collaspe-color);
  }
}

.collapse .menu-nav-item.nav-popup-list {
  .text {
    display: none;
  }
}
</style>
